The  Rails  Approach 


• In  Rails,  everything  has  its  place  and  everything  is 
in  its  place. 

• Initially  this  seems  like  a pain  - but  it  is 
wonderful  when  looking  at  many  different  Rails 
applications. 

• Rails  effectively  pre-chooses  90%  of  the 
architecture  choices  of  a web  application. 

• We  learn  and  follow  the  Rails  approach 


Ruby  on  Rails  vs  PHP  - RailsEnvy.com  Commercial  #3 


1 #i||  ES  PH 


http://www.youtube.com/watch?v=p5ElrSM8dCA 


Model  - View  - Controller 


• Model  - Persistent  Storage  - Database  - stores  across  all  sessions  and 
across  time 

• View  - Look  and  Feel  of  the  application  - usability,  accessibility,  design, 
appeal,  functionality,  drag  and  drop, .... 

• Controller  - Program  logic,  business  rules,  flow  from  screen  to  screen 
controls  each  session  independently. 


MVC  - Request  - Response  Cycle 


' 

Mocel 

Business  Logic 


MVC  Seq 

uence 

• User  presses  button,  browser  sends  data 
to  application 

• Controller  receives  the  data,  and  makes 
updates  to  and/or  retrieves  from  the 

Browser 

O sends  request  q 

gets  sent  back 

model  as  necessary 

Model  gamers  data  ' Controller  View 

• User  output  data  is  passed  to  the  View  - 
view  applies  final  look  and  feel  and  the 
response  goes  back  to  the  Brower. 

Business  Logic  and  updates  — Application  Logic  renders — ► Presentation  Logic 

■ © — ® ' 

MVC  Detail 


• An  application  can  have  many  controllers 

• Each  controller  can  have  a number  of  actions  - actions  roughly 
correspond  to  the  buttons  in  an  application  - what  you  want  to  be 
done 

• Each  controller  can  have  many  views  - views  roughly  correspond  to 
the  screens  in  an  application 

• Each  application  can  have  many  models  to  store  data  - and  there  are 
relationships  between  those  models 


Personal  Learning  and  Reflection  Environment 

◄ ► | <5  R:i  + Q|http://localhost:3000/ 

PP  Tooz  13k  CT  Dr  Mail  GMail  Blogin  18k 
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1 Q,"  Google 


Toozday  Personal 
Learning  Environment  (I  1.0) 


You  are  logged  in  as  admin  (logout) 


Three  Controllers 


Refresh  (0  Sites) 


My  Profile 


Users 


Sites 


Add  Account 

The  portal  shows  two 
tools  at  a time  using  Ajax 
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http://localhost:3000 


Are  you  sure? 
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Confirm  View 
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Views:  List,  Add, View,  Confirm 

Actions:  List,  Add,  Create, View, 
Confirm,  Delete 


Please  in  Fields  for  your  New  Account 
Name: 


Show  All 

To  Edit,  simply  click  on  the  text  you 
want  to  edit 

Name: 
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edit 
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http:/  /localhost:3000 

Are  you  sure? 
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Controllers,  Actions,  Views 


• Each  controller  has  one  or  more  actions 

• Actions  correspond  to  “asking  for  something  to  be  done” 

• Views  correspond  to  the  pages  you  see 


Rails  Controller  Anatomy 


http://en.wikipedia.org/wiki/lmage:Heart-and-lungs.jpg 


Inside  A Rails  Application 


• Rails  dictates  the  layout  of  an  application  directory  - 
one  less  decision  for  a developer  to  make 

• The  directory  structure  precisely  reflects  the  MVC 
architecture 

• This  helps  Rails  developers  know  where  to  look  for 
things  when  faced  with  a new  Rails  application 

• Removing  choice  improves  clarity  and  speeds  learning 
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Making  a Rails  Application 


• The  rails  command  makes  a new  folder  / directory  and  populates  it 
with  a skeleton  Rails  application. 

• The  application  is  fully  functional  and  had  a lot  of  structure  but  it  has 
no  models,  views  or  controllers. 

• Rails  puts  in  all  the  places  where  models,  views,  and  controllers  go  - 
but  they  are  empty. 


$ rails  appO  -d  sqlite3 

create  app/controllers 

create  app/controllers/application.rb 

create  app/helpers 

create  app/helpers/application_helper.rb 
create  app/models 
create  app/views/layouts 
create  db 

create  public/index.html 

create  public/images/rails.png 

create  public/stylesheets 

create  p u b I i c/j avasc ripts/prototype.js 

c reate  p u b I ic/j avasc ri pts/ effects. j s 

create  log 

create  log/server.log 

create  log/production. log 

create  log/development.log 

create  log/test. log 

$ cd  appO 

$ ruby  script/server 


Ruby  on  Rails:  Welcome  aboard 


< j ►IIC  Ohttp://localhost:3000/  * Q.*  anatomy  © » 

QP  Tooz  13k  CT  Dr  Mail  GMail  Blogin  18k 


Welcome  aboard 

You’re  riding  the  Rails! 

About  vour  application’s  environment 


Getting  started 

Here's  how  to  get  rolling: 

1.  Create  your  databases  and  edit 
conf ig/database . yml 

Rails  needs  to  know  your  login  and  password. 

2.  Use  script/generate  to  create  your 
models  and  controllers 

To  see  all  available  options,  run  it  without  parameters. 


U 


Controller,  Actions, Views 


We  use  a code  generator  to  add  a controller  with  some  views  to  our 
application 

$ cd  appO 

$ ruby  script/generate  controller  One  index  add 


Please  generate  the  code  for  a controller  named  “One”  with  actions  named 
“index”  and  “add”  and  views  named  “index”  and  “add”. 


$ ruby  script/generate  controller  One  index  add 
exists  app/controllers/ 
exists  app/helpers/ 
create  app/views/one 
exists  test/functional/ 
create  app/controllers/one_controller.rb 
create  test/functional/one_controller_test.rb 
create  app/helpers/one_helper.rb 
create  app/views/one/index.rhtml 
create  app/views/one/add.rhtml 
$ ruby  script/server 
=>  Booting  .... 


m app 

Directory 

vm  controllers 

Directory 
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File 
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helpers 

Directory 

models 

Directory 

views 
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http: //local  host:  3000/one/ 

■<  | ► Ohttp://localhost:3000/one/  © * 'Q*  Google  © » 
CQ  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  18k 


One#index 

Find  me  in  app/vicws/onc/indcx.rhtml 


http://localhost:3000/one/add/ 

| | Hhttp://localhost:3000/one/add/  * Q.*  Google  O' » 

QQ  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  18k 

One#add 

Find  me  in  app/view  s/one/add  jhtml 


//.  //. 


http://localhost:3000/one/add/ 


The  default  action  is  assumed  to  be  “index”. 


A View 


Rails  has  generated  a simple 
view  template  for  us  because 
we  requested  an  index  view 

Rails  even  put  a hint  as  to 
where  to  find  the  view  file. 

This  view  ends  in  rhtml  - this 
means  that  it  is  not  just  HTML, 
it  also  can  contain  Embedded 
Ruby  code. 


http: //local  host:  3000/one/ 

■4  | ► Hhttp://localhost:3000/one/  © * Q,~  Google  © » 
OQ  Tooz  siS39  13k  CT  Dr  Mail  GMail  Blogin  18k 

One#index 

Find  me  in  app/vicws/onc/indcx. rhtml 

\ 


1 O index. rhtml  (/Users/csevadmin/rails_apps/appO/app/views/one/)  t 


<hl>One  # ind  e x< / hl> 

<p>Find  me  in  app /views /one/ ind e x. rhtml</p> 


Embedded  Ruby 


• In  rhtml  files,  text  between 
<%  and  %>  is  ruby  code 
which  is  executed 

• When  something  is 
between  <%=  and  %>  it  is 
printed  as  part  of  the 
returned  HTML 


o|  Lc 


oo4-aa 

index. rhtml  (/Users/csevadmin/rails_apps/appO/app/views/one/)  i 

<hl>0ne  # ind  e x< / hl> 

<p>Find  me  in  app /views /one/ ind e x. rhtml</p> 

<p>Time  now:  <%=  Time,  now  %></p> 


http: //local  host:  3000/one/ 

◄ | ► Hhttp://localhost:3000/one/  * ^Q.-  Coogle  O'  » 

Q3  T 002  si539  13k  CT  Dr  Mail  CMail  Blogin  18k 

One#index 

Find  me  in  app/vicws/onc/indcx  .rhtml 
Time  now:  Thu  Feb  07  23:25:25  -0500  2008 


//. 


Adding  an  Image 


We  store  images  under  the  directory 
public/images 

We  use  the  image_tag  helper  in 
Embedded  Ruby  to  generate  the 
HTML  img  tag. 

We  tell  image_tag  the  name  of  the 
image  file. 


app 

Directory 
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vkit  public 

Directory 

images 
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K rails.png 

File  1.7  KB 

javascripts 

Directory 

stylesheets 

Directory 

<p><%=  image_tag  "rails.png",  :alt  =>  "Rails  Logo"  %></p> 


<p>Find  me  in  app/views/one/index.rhtml</p> 

<p>Time  now:  <%=  Time. now  %></p> 

<p><%=  image_tag  "rails.png",  :alt  =>  "Rails  Logo"  %></p> 


http: //local  host:  3000/one 

Hhttp://localhost:3000/one  * ^Google  © » 

CD  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  » 

Find  me  in  app/vicws/onc/indcx.rhtml 
Time  now:  Fri  Feb  08  00:13:10  -0500  2008 


nniLS 


Rails  adds  a timestamp  to  the  end  of  the  image 
reference  to  make  sure  the  browser  does  not 
cache  images  and  possibly  ignore  a change  when 
you  update  an  image. 


<p>Find  me  in  app/views/one/index.rhtml</p>  / 

<p>Time  now:  Fri  Feb  08  00: 13:10  -0500  2008</p>  ^ 

<p><img  alt="Rails  Logo"  src=7images/rails.png?  1 20244 1 163"  /></p> 


Cascading  StyleSheets 


Style  sheets  are  stored  under 
public/stylesheets 

There  is  an  embedded  Ruby 
helper  to  reference  a stylesheet 


<%=  stylesheet_link_tag  "style. css"  %> 
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controllers 
helpers 
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Directory 

File 

File 

File 


body  { 

font-family:  arial; 

} 


<html> 


<head> 

<%=  styles heet_link_tag  "style. css"  %> 
</head> 


^ ^ ^ http://localhost:3000/one?thing= 

Ohttp://localhost:3000/one?thing=  © - Google  » 
CP  Tooz  si539  13k  CT  Dr  Mail  CMail  Blogin  » 

Hello 

Time  now:  Fri  Feb  08  01 :48:23  -0500  2008 
Please  click  here. 


BRILS 

4 


//. 


<body> 

<p><%=  @greet  %></p> 

<p>Time  now:  <%=  Time. now  %></p> 

<p>Please  click 

<a  href="<%=  url_for  :action  =>  "add"  %>"  >here</a>. 

<p><%=  image_tag  "rails.png",  :alt  =>  "Logo"  %></p> 

</body> 

Up  Next:  Big  Picture 


Linking  Between  Actions 


• Even  though  we  know  the  urls  for  an  action  we  have  a special  utility  in 
Rails  that  gives  links  to  actions  within  controllers. 

• The  url_for  - generates  a url  which  references  an  action 

url  for  :action  =>  "add" 


In  English  - Make  me  a URL  which  will  get  me  to  the  add  action. 


<p>Find  me  in  app/views/one/index.rhtml</p> 

<p>Time  now:  <%=  Time. now  %></ p> 

<p>Please  click 

<a  href="<%=  url_for  raction  =>  "add"  %>"  >here</a>. 
<p><%=  image_tag  "rails. png",  :alt  =>  "Rails  Logo"  %></p> 

http://localhost:3000/one 

Hhitp://localhosi:3000/one  * Q.-  Coogle  O » 

CP  TOO*  Si539  13k  CT  Dr  Mail  CMail  Slogin  » 

Find  me  in  app/views/one/indcx.rhtml 
Time  now:  Fri  Feb  08  00:20:06  -0500  2008 
Please  click  here. 

H 

■ MIM 

A 

<p>Find  me  in  app/views/one/index.rhtml</p> 

<p>Time  now:Thu  Feb  07  23:39:19  -0500  2008</p> 

<p>Please  click 

<a  href='7one/add"  >here</a>. 

<p><img  alt="Rails  Logo"  src="/images/rails. png?  1 202441  163"  /></p> 


http: //local  host:  3000/one 

fjhttp://localhost:3000/one  - Q,»  Google  © » 

Q3  Tooz  si539  13k  CT  Dr  Mail  CMail  Blogin  » 

Find  me  in  app/vicws/onc/indcx  .rhtml 


http://localhost:3000/one/add 

| Hhttp://localhost:3000/one/add  © ■ Q.-  Google  O'1  » 
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Time  now:  Fri  Feb  08  00:20:06  -0500  2008 
Please  click  here. 


One#add 

Find  me  in  app/views/one/add  jhtml 


//. 


//. 


<h  I >One#index</h  I > 

<p>Find  me  in  app/views/one/index.rhtml</p> 
<p>Time  now:  <%=  Time. now  %></p> 

<p>Please  click 

<a  href="<%=  url  for  raction  =>  "add"  %>"  >here</a>. 


<form  action="<%=  url_for  .'action  =>  "index"  %>"  method="get"> 
<p>Adding:<input  type="text"  name="thing"/>  </p> 

<p><input  type="submit"  /></p> 

</form> 


We  make  a simple  form  and  use 
embedded  Ruby  and  the  url_for 
command  to  generate  a url  to  use  for 
form  submission.  We  will  submit  our 
form  input  to  the  index  action. 


<form  action="/one/index"  method="get"> 
<p>Adding:<input  type="text"  name="thing7>  </p> 
<p><input  type="submit"  /></ p> 

</form> 


http:// local  host:  3000/one/add 

fjhttp://localhost:3000/one/add  A Q-  Google  Q » 
CD  Tooz  si539  13k  CT  Dr  Mail  CMail  Blogin  » 

Adding!  Barcelona 

( Submit  ^ 


http: //localhost:  3000/one/add 


[jhttp://localhost:3000/one/add  * Q-  Loogle  Q » 
CP  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  » 


Adding!  Barcelona 
(Submit) 


<form  action="/one/index"  method="get"> 
<p>Adding:<input  type="text"  name="thing"/>  </p> 
<p><input  type="submit"  /></p> 

</form> 


http: //local  host  :3000/one,thing  = Barceloi] 

◄ | 6 t<3  + Qhttp://localhost:3000/one?thing=Barcelona  ©*  Coogle 

QH  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  18k 

Find  me  in  app/view  s/one/index  jhtml 
Time  now:  Fri  Feb  08  00:28:43  -0500  2008 
Please  click  here. 


//. 


With  the  GET  method,  the  form  data  is  appended  to  the  URL  after  a question  mark  (?). 


Where  is  the  Action  at? 


• The  actions  for  a particular  controller 
are  all  stored  in  a file  called 
one_controller.rb 

• The  controller  is  all  written  in  the 
Ruby  programming  language 
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K one_controller.rb  File 
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views 
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add.rhtml 
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Directory 
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jl. 
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► 

O one. 

_controller.rb  (/ Users/ csevadmin/rails_apps/appO/app/ controllers/) 

▲ 

▼ 

class  OneController  < ApplicationController 

def  index 
end. 

def  add 
end. 
end 


• This  file  has  two  actions  - one  named  “index”  and  the  other  named 
“add”  - just  like  we  requested  on  the  ruby  script/generate  controller 
command  many  slides  back. 

• Both  actions  are  doing  nothing  at  this  point  in  time  and  just  fall 
through  to  the  view  of  the  same  name.  The  “add”  action  falls  through 
into  the  add.rhtml  view  file. 


class  OneController  < ApplicationController 
def  index 
end 


def  add 
end 
end 


What  a controller  looks  like.  At 
least  what  a controller  with 
actions  that  do  nothing  except 
fall  through  to  the  view  files 
looks  like. 

X -n 

Q)  W 

~o  "5  We  have  2 actions. 


Lets  get  into  Action! 

• A simple  thing  to  do  is  to  add  the  Rails  code  to  print  a message  in  the 
log  whenever  the  action  is  executes. 


class  OneController  < ApplicationController 
def  index 

logger.info  "WE  ARE  IN  THE  INDEX  ACTION!" 
end 

def  add 

logger.info  "WELCOME  TO  THE  ADD  ACTION" 
end 
end 


Watching  the  Rails  Logs 

• Looking  at  Rails  log  output  is 
important  - it  helps  you  figure  out 
why  something  is  not  working. 

• The  logs  look  complex,  messy,  and 
confusing 

• But  after  a while,  if  you  look  long 
enough  - you  can  see  through  the  log 
and  visualize  the  activity  in  your 
program  (as  per  Tank  in  the  Matrix) 


Where  are  the  Logs? 


The  log  you  are  interested  in  is  stored  in 
log\development.log 


On  Macintosh,  this  log  scrolls  by 
continuously  in  the  terminal  window 
while  your  server  is  running. 


On  Windows  - you  use  a program  like 
WinTail  to  open  the  log  file  - WinTail 
watches  the  “tail  end”  of  the  file  and 
immediately  shows  you  if  something  new 
appears. 
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Adding:  Barcelona 


( Submit ) 


http: //local  host:  3000/one?thing  = Barcelona 

■*  | | 6 | |§<:iJ  | + fi http:/ /local host:3000/one?thina= Barcelona  © * Q.-  Google 

CP  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  18k 

Find  me  in  app/vicws/onc/indcx.rhtml 
Time  now:  Fri  Feb  08  00:28:43  -0500  2008 
Please  click  here. 


f 

ROILS 


Processing  OneController#index  (for  1 27.0.0. 1 at  2008-02-08  01:1 3:08)  [GET] 
Session  ID:  7c  1 873d5af 1 86e  1 2f3390 1 4a  I d5ab7d6 

Parameters:  {"action"=>"index",  "controller"=>"one",  ,'thing"=>"Barcelona"} 
WE  ARE  INTHE  INDEX  ACTION! 

Rendering  one/index 

Completed  in  0.01026  (97  reqs/sec)  | Rendering:  0.0075 1 (73%)  | 200  OK 
[http://localhost/one?thing=  Barcelona] 


Processing  OneController#index  (for  127.0.0.1  at  2008-02-08  01:1  3:08)  [GET] 
Session  ID:  7c  1 873d5af 1 86e  1 2f3390 1 4a I d5ab7d6 

Parameters:  {"action,,=>"index",  "controller"=>"one",  "thing"=>"Barcelona"} 
WE  ARE  INTHE  INDEX  ACTION! 

Rendering  one/index 

Completed  in  0.01026  (97  reqs/sec)  | Rendering:  0.0075 1 (73%)  | 200  OK 
[http://localhost/one?thing=  Barcelona] 


Rails  receives  a GET  request  from  our  browser. 

The  Session  identifies  which  browser  sent  the  request  if  multiple  browsers  are  active 
The  parameters  include  our  data  (Barcelona)  from  the  form  field  named  “thing”. 

You  see  the  log  message  from  within  the  INDEX  action. 

When  the  action  finished  it  moves  on  to  render  the  view  file  (index.rhtml)  one/index 
Then  it  is  all  finished  - it  took  about  I / 1 00  of  a second  to  do  the  work 


Using  the  Form  Data 


• We  will  change  the  action  to  look 
at  the  form  data.  If  the  user 
entered  “Barcelona”,  we  will  say 
“Hola”  - otherwise  we  say  “Hello” 

• We  pass  the  greeting  from  the 
action  to  the  view  in  a variable 
named  @greet 

• Variables  that  start  with  @ in 
Ruby  are  special 


def  index 

if  params[:thing]  ==  "Barcelona" 
@greet  = "Hola" 
else 

@greet  = "Hello" 
end 
end 


Displaying  the  Greeting 


• We  add  some  more 
Embedded  Ruby  to  the 
view  file  index.rhtml 

• The  code  prints  out 
the  contents  of  the 
@greet  variable 


<p><%=  @greet  %></p> 

<p>Time  now:  <%=  Time. now  %>  </p> 
<p>Please  click 

<a  href="<%=  url_for  :action  =>  "add"  %>"  > 
here</a>. 

<P> 

<%=  image_tag  "rails. png",  :alt  =>  "Logo"  %> 

</p> 


WOO  http://localhost:3000/one/add 
Hhttp://localhost:3000/one/add  Ql  * Q*  Google 

CD  Tooz  si539  13k  CT  Dr  Mail  CMail  Blogin  » 


Adding;!  New  York 
( Submit  1 


//. 


^ ^ ^ http://localhost:3000/one/add 

flhttp://localhost:3000/one/add  © * Q*  Google  » 
HQ  Tooz  si539  13k  CT  Dr  Mail  CMail  Blogin  » 


Adding:  Barcelona 
( Submit  ) 


^ ^ http;//localhost:30...one?thing=New+York 

fj|http://localhost:3000/one?thing=k©  * Q.-  Google  » 
CP  Tooz  siS39  13k  CT  Dr  Mail  CMail  Blogin  » 

Hello 

Time  now;  Fri  Feb  08  01:24:37  -0500  2008 
Please  click  here. 


t 

ROILS 


//. 


^ ^ ^ http://localhost:300...one?thing=Barcelona 

Ohttp://localhost:3000/one?thing=B©  - Q.- 
CP  Tooz  si539  13k  CT  Dr  Mail  CMail  Blogin  » 

Hola 

Time  now:  Fri  Feb  08  01:36:05  -0500  2008 
Please  click  hero. 


ROILS 


//. 


http://localhost:3000/one/add 


http://localhost:300.  .one?thing=Barcelona 


[jhttp://localhost:3000/one/add  Q - Q-  Google  » 


QP  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin  » 


Adding:  Barcelona 


( Submit") 


flhttp://localhost:3000/one?thing=B©  * Google 
CP  Tooz  si539  13k  CT  Dr  Mail  GMail  Blogin 

Hola 

Time  now:  Fri  Feb  08  01 :57:03  -0500  2008 
Please  click  here. 


display  to  the  user. 


<p><%=  @greet  %></p> 

<p>Time  now:  <%-  Time. now  %></p> 

<p>Please  click 

<a  href="<%=  url_for  .‘action  =>  "add"  %>"  >here</a>. 
<p><%=  image_tag  "rails.png",  :alt  =>  "Rails  Logo"  %></p> 


x 


CL> 

XI 

c 


X 

X) 


< 


V. 


def  index 

if  params[:thing]  ==  "Barcelona" 
@greet  = "Hola" 
else 

@greet  = "Hello" 
end 
end 


The  Controller  / Actions  are  written  in  Ruby  - the  Views  are 
written  in  HTML  with  Embedded  Ruby. 


Views 


Summary 


• A Rails  application  has  a particular  directory  structure  and  logical  flow 

• The  Rails  approach  to  MVC  is  embedded  in  its  directory  structure 

• Initially  it  might  be  hard  to  find  your  way  around  because  the 
structure  is  provided  for  you 

• Later  - having  identical  program  structure  makes  it  really  simple  to 
look  at  Rails  applications  developed  but  others 


